<template>
  <div class="container">
    <gant-view class="left-container" :tasks="tasks"></gant-view>
  </div>
</template>

<script>
import GantView from './GantView';

export default {
  name: 'ganttNeed',
  components: {GantView},
  data () {
    return {
      tasks: {
        /**
         ● data - 定义甘特图中的任务
         　　○ id - (string, number)任务id
         　　○ start_date - (Date)任务开始日期
         　　○ text - (string)任务描述
         　　○ progress - (number) 任务完成度，0到1
         　　○ duration - (number) 在当前时间刻度下的任务持续周期
         　　○ parent - (number) 父任务的id
         ● links - 定义甘特图中的任务关联线
         　　○ id - (string, number) 关联线id
         　　○ source - (number) 数据源任务的id
         　　○ target - (number) 目标源任务的id
         　　○ type - (number) 关联线类型：0 - “结束到开始”，1 - “开始到开始”，2 - “结束到结束”
         */
        data: [
          {id: 1, text: 'Task #1', start_date: '2021-05-17 08:00',end_date:'2021-05-17 08:30', progress: 0},
          {id: 5, text: 'Task #1', start_date: '2021-05-17 09:30',end_date:'2021-05-17 10:30', progress: 0,parent:1},
          {id: 2, text: 'Task #2', start_date: '2021-05-17 09:00', duration: 30, progress: 0},
          {id: 3, text: 'Task #3', start_date: '2021-05-17 13:30', duration: 30, progress: 0},
          {id: 4, text: 'Task #4', start_date: '2021-05-22 08:30', duration: 30, progress: 0}
        ],
        // links: [
        //   {id: 1, source: 1, target: 2, type: '0'}
        // ]
      },
    }
  }
}
</script>

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  height: 100%;
  width: 100%;
}
.left-container {
  overflow: hidden;
  position: relative;
  height: 100%;
}
</style>
